<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--项目数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-select
            v-model="queryParams.projectId"
            placeholder="请选择所属项目"
            clearable
            style="margin-bottom: 20px; width: 100%"
            @change="projectChange"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="head-container">
          <el-tree
            :data="nodeOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--设备数据-->
      <el-col :span="20" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="设备类型" prop="deviceType">
            <el-select
              v-model="queryParams.deviceType"
              placeholder="请选择设备类型"
              clearable
              @change="handleQuery"
            >
              <el-option
                v-for="dict in dict.type.buss_device_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="userName">
            <el-input
              v-model="queryParams.deviceName"
              placeholder="请输入设备名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['bussiness:device:topology:add']"
              :disabled="!queryParams.nodeId"
              >分配设备</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['bussiness:device:topology:remove']"
              >移除</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getDeviceList"
          ></right-toolbar>
        </el-row>

        <el-table
          v-loading="loading"
          :data="deviceList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="ID" align="center" prop="id" fixed />
          <el-table-column label="设备类型" align="center" prop="deviceType">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.buss_device_type"
                :value="scope.row.deviceType"
              />
            </template>
          </el-table-column>
          <el-table-column label="设备名称" align="center" prop="deviceName" />
          <el-table-column label="设备状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.buss_device_status"
                :value="scope.row.status"
              />
            </template>
          </el-table-column>
          <el-table-column label="节点类型" align="center" prop="nodeType">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.buss_device_node_type"
                :value="scope.row.nodeType"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="最后一次在线时间"
            align="center"
            prop="lastTime"
            width="180"
          />
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDeviceList"
        />
      </el-col>
    </el-row>

    <!-- 添加设备对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      append-to-body
      :close-on-click-modal="false"
      @opened="dialigOpened"
    >
      <el-row>
        <el-col>
          <el-form
            :model="dialogTable.queryParams"
            ref="dialogQueryForm"
            size="small"
            :inline="true"
            v-show="dialogTable.showSearch"
            label-width="68px"
          >
            <el-form-item label="设备类型" prop="deviceType">
              <el-select
                v-model="dialogTable.queryParams.deviceType"
                placeholder="请选择设备类型"
                clearable
                @change="dialogTableHandleQuery"
              >
                <el-option
                  v-for="dict in dict.type.buss_device_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="设备名称" prop="userName">
              <el-input
                v-model="dialogTable.queryParams.deviceName"
                placeholder="请输入设备名称"
                clearable
                style="width: 240px"
                @keyup.enter.native="dialogTableHandleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="dialogTableHandleQuery"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="dialogTableResetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <right-toolbar
              :showSearch.sync="dialogTable.showSearch"
              @queryTable="dialogTableGetDeviceList"
            ></right-toolbar>
          </el-row>

          <el-table
            v-loading="dialogTable.loading"
            :data="dialogTable.deviceList"
            @selection-change="dialogTableHandleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="ID" align="center" prop="id" fixed />
            <el-table-column label="设备类型" align="center" prop="deviceType">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.buss_device_type"
                  :value="scope.row.deviceType"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="设备名称"
              align="center"
              prop="deviceName"
            />
            <el-table-column label="设备状态" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.buss_device_status"
                  :value="scope.row.status"
                />
              </template>
            </el-table-column>
            <el-table-column label="节点类型" align="center" prop="nodeType">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.buss_device_node_type"
                  :value="scope.row.nodeType"
                />
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="dialogTable.total > 0"
            :total="dialogTable.total"
            :page.sync="dialogTable.queryParams.pageNum"
            :limit.sync="dialogTable.queryParams.pageSize"
            @pagination="dialogTableGetDeviceList"
          />
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProject,
  listProjectNode,
  listDevice,
  removeDeivce,
  listAllocateDevice,
  addDevice,
} from "@/api/bussiness/deviceTopology";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "DeviceTopology",
  dicts: [
    "sys_normal_disable",
    "sys_user_sex",
    "buss_device_type",
    "buss_device_node_type",
    "buss_device_status",
  ],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      multiple: true,
      // 设备表格数据
      deviceList: null,
      //项目列表
      projectList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      nodeOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 节点名称
      nodeName: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceName: undefined,
        nodeId: undefined,
        projectId: undefined,
        deviceType: undefined,
      },
      //对话框表格
      dialogTable: {
        ids: [],
        multiple: true,
        loading: false,
        // 显示搜索条件
        showSearch: true,
        deviceList: null,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deviceName: undefined,
          nodeId: undefined,
          projectId: undefined,
          deviceType: undefined,
        },
      },
    };
  },
  watch: {
    // 根据名称筛选项目节点树
    nodeName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getProjectList();
    this.getNodeTree();
    this.getDeviceList();
  },
  methods: {
    // 项目切换
    projectChange(e) {
      this.queryParams.nodeId = undefined;
      //重新加载项目节点tree
      this.getNodeTree();
      //重新加载设备数据
      this.getDeviceList();
    },
    /** 查询项目列表 */
    getProjectList() {
      this.loading = true;
      listProject().then((response) => {
        this.projectList = response.data;
        this.loading = false;
      });
    },
    getDeviceList() {
      this.loading = true;
      listDevice(this.queryParams).then((response) => {
        this.deviceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询部门下拉树结构 */
    getNodeTree() {
      listProjectNode({ projectId: this.queryParams.projectId }).then(
        (response) => {
          this.nodeOptions = response.data;
        }
      );
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.nodeId = data.id;
      this.handleQuery();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.dialogTable = {
        loading: false,
        // 显示搜索条件
        showSearch: true,
        deviceList: null,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deviceName: undefined,
          nodeId: undefined,
          projectId: undefined,
          deviceType: undefined,
        },
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getDeviceList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.deviceName = undefined;
      this.queryParams.deviceType = undefined;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.dialogTableGetDeviceList();
      this.title = "添加设备";
    },
    /** 提交按钮 */
    submitForm() {
      if (!this.dialogTable.ids || this.dialogTable.ids.length == 0) {
        this.$modal.msgWarning("请选择要添加的设备。");
      } else {
        let data = {
          ids: this.dialogTable.ids,
          nodeId: this.queryParams.nodeId,
        };
        addDevice(data).then((response) => {
          this.$modal.msgSuccess("添加成功。");
          this.open = false;
          this.getDeviceList();
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认移除编号为"' + ids + '"的设备？')
        .then(function () {
          return removeDeivce(ids);
        })
        .then(() => {
          this.getDeviceList();
          this.$modal.msgSuccess("移除成功。");
        })
        .catch(() => {});
    },
    dialigOpened() {},
    dialogTableGetDeviceList() {
      this.dialogTable.loading = true;
      listAllocateDevice(this.dialogTable.queryParams).then((response) => {
        this.dialogTable.deviceList = response.rows;
        this.dialogTable.total = response.total;
        this.dialogTable.loading = false;
      });
    },
    dialogTableResetQuery() {
      this.queryParams.deviceName = undefined;
      this.queryParams.deviceType = undefined;
      this.dialogTableHandleQuery();
    },
    /** 搜索按钮操作 */
    dialogTableHandleQuery() {
      this.dialogTable.queryParams.pageNum = 1;
      this.dialogTableGetDeviceList();
    },
    // 多选框选中数据
    dialogTableHandleSelectionChange(selection) {
      this.dialogTable.ids = selection.map((item) => item.id);
      this.dialogTable.multiple = !selection.length;
    },
  },
};
</script>
